<!-- 详情 -->
<template>
  <div class="">
    <div class="layout">
      <el-form :inline="true" class="search-form" label-position="right" label-width="60px">
        <el-row style="display: flex; flex-wrap: wrap">
          <div style="flex: 1">
            <el-form-item label="分组" style="margin: 5px 0">
              <el-select clearable v-model="searchForm.group_id" placeholder="请选择分组">
                <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="等级" style="margin: 5px 0">
              <el-select clearable v-model="searchForm.level_id" placeholder="请选择等级">
                <el-option v-for="item in gradeList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div style="margin: 5px 0; text-align: right">
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="getListWay">查询</el-button>
              <el-button size="small" type="info" icon="el-icon-refresh" @click="resetting">重置</el-button>
              <el-button size="small" type="warning" icon="el-icon-setting" @click="resetting">批量配置</el-button>
              <!-- <el-button v-if="!searchDisplay" type="warning" icon="el-icon-caret-bottom"
                  @click="searchDisplay = true">展开</el-button>
                <el-button v-else type="warning" icon="el-icon-caret-top" @click="searchDisplay = false">收起</el-button> -->
            </el-form-item>
          </div>
        </el-row>
      </el-form>
      <!-- search -->
    </div>
    <el-divider></el-divider>
     <el-row>
    <el-form ref="formRules" :model="formData" :rules="formRules" inline>
      <el-col class="with_search_card" style="overflow-y: auto;">
      <el-table highlight-current-row :data="formData.userList" :header-cell-style="{
        'background-color': '#f3f8fe',
        color: '#606266',
        height: '50px',
      }" style="width: 100%;" height="100%" v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55">
        </el-table-column>
        <el-table-column align="center" prop="id" width="100" label="用户ID">
        </el-table-column>
        <el-table-column align="center" prop="nickname" label="用户昵称">
        </el-table-column>
        <!-- <el-table-column align="center" prop="user_tag_arr" label="用户标签">
          <template slot-scope="scope">
            <span v-if="scope.row.user_tag_arr.length > 0">
              <el-tooltip :content="scope.row.user_tag_arr.join(',')" placement="top">
                <span v-for="item, inx in scope.row.user_tag_arr" :key="inx">{{ item }}
                </span>
              </el-tooltip>
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column align="center" prop="group_name" label="用户分组">
          <template slot-scope="scope">
            <el-tooltip placement="top-start" :content="scope.row.group_name + ''">
              <div class="one_line_hidden">
                {{ scope.row.group_name ? scope.row.group_name : "-" }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column> -->
        <el-table-column align="center" prop="address_name" label="用户区域" width="180">
          <template slot-scope="scope">
            <el-tooltip placement="top-start" :content="scope.row.address_name + ''">
              <div class="one_line_hidden">
                {{ scope.row.address_name ? scope.row.address_name : "-" }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="日限购数" align="center" width="180">
          <template slot-scope="scope">
            <el-col style="margin-top:10px">
              <el-form-item :prop="`userList.${scope.$index}.daily_purchase`" :rules="formRules.newFieldName">
                <el-input controls-position="right" v-model="scope.row.daily_purchase" placeholder="请输入限购数量">
                </el-input>
              </el-form-item>
            </el-col>
          </template>
        </el-table-column>
        <el-table-column label="周限购数" align="center" width="180">
          <template slot-scope="scope">
            <el-col style="margin-top:10px">
              <el-form-item :prop="`userList.${scope.$index}.week_purchase`" :rules="formRules.newFieldName">
                <el-input controls-position="right" v-model="scope.row.week_purchase" placeholder="请输入限购数量">
                </el-input>
              </el-form-item>
            </el-col>
          </template>
        </el-table-column>
        <el-table-column label="月限购数" align="center" width="180">
          <template slot-scope="scope">
            <el-col style="margin-top:10px">
              <el-form-item :prop="`userList.${scope.$index}.month_purchase`" :rules="formRules.newFieldName">
                <el-input controls-position="right" v-model="scope.row.month_purchase" placeholder="请输入限购数量">
                </el-input>
              </el-form-item>
            </el-col>
          </template>
        </el-table-column>
        <el-table-column label="总限购数" align="center" width="180">
          <template slot-scope="scope">
            <el-col style="margin-top:10px">
              <el-form-item :prop="`userList.${scope.$index}.total_purchase`" :rules="formRules.newFieldName">
                <el-input controls-position="right" v-model="scope.row.total_purchase" placeholder="请输入限购数量">
                </el-input>
              </el-form-item>
            </el-col>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" style="width: 60px;">
              限购
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-col>
    </el-form>
    </el-row>
    <el-row style="text-align: right">
      <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.count"
        @pagination="getListWay" />
    </el-row>
  </div>
</template>
<script>
  import {
    getgradeList,
    getgroupList,
    getUserList
  } from "@/api/user/index";
  export default {
    name: "detail",
    props: [],
    components: {},

    data() {
      return {
        formData:{
          userList: [],
        },
        formRules:{
          newFieldName: [{
            required: false,
            validator: (rule, value, callback) => {
              let req = /^\d+$/;
              if (req.test(value)) {
                callback();
              } else {
                callback(new Error("请输入正整数"));
              }
            },
            trigger: "change",
          }],
        },
        gradeList: [],
        groupList: [],
        loading: false,
        // 用户列表总条数
        total: 0,
        // 当前搜索是否展开
        searchDisplay: false,
        //列表当前选中的数组
        multipleSelection: [],
        searchForm: {
          level_id: "",
          group_id: "",
          page: 1,
          count: 10,
        },
      };
    },
    created() {
      this.getListWay()
      getgradeList().then((res) => {
        this.gradeList = res.data.list;
      });
      getgroupList().then((res) => {
        this.groupList = res.data.list;
      });
    },
    methods: {
      // 获取用户列表
      getListWay() {
        this.loading = true;
        var obj = JSON.parse(JSON.stringify(this.searchForm));
        getUserList(obj).then((res) => {
          this.loading = false;
          if (res.code !== 200) {
            this.$messages.error(res.msg);
            return;
          }
          this.formData.userList = res.data.list;
          this.total = res.data.total;
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      resetting() {
        this.$refs.formRules.clearValidate();
        this.getListWay()
      },
    },
  };
</script>
<style lang="scss">
</style>
<style lang="scss" scoped>
</style>
